<template>
  <div class="page-box">
    <!-- <QueryFormVue ref="queryForm" /> -->
    <div class="top-bar">
      <TitleBox :title="title1" />
      <div class="barContent">
        <SingleBar />
        <DoubleBar />
      </div>
    </div>
    <div class="bottom-bar">
      <TitleBox :title="title2" />
      <div class="bottom-content">
        <CustomTable
          :columns="columns"
          :tableData="tableData"
        />
      </div>
    </div>
  </div>
</template>

<script>
import TitleBox from './components/titleBox.vue';
import QueryFormVue from './QueryForm.vue';
import CustomTable from '../../components/CustomTable.vue';
import SingleBar from './components/singleBar.vue';
import DoubleBar from './components/doubleBar.vue';
import { tableColumns } from './tableColumns.js'

export default {
  components: {
    TitleBox,
    QueryFormVue,
    CustomTable,
    SingleBar,
    DoubleBar,
  },
  data() {
    return {
      title1: "低通过率省份",
      title2: "规则通过率",
      formInline: {
        startTime: '',
        endTime: ''
      },
      tableData: [],
      columns: [...tableColumns]
    }
  }
}
</script>


<style lang="scss" scoped>
  .page-box {
    padding: 20px;
    height: 100%;
    width: 100%;
    background: #fff;
    .top-bar, .bottom-bar {
      height: 49%;
      width: 100%;
      background: #f5f5f5;
      border: 1px solid #ccc;
      margin: 0 0 10px 0;
    }
    .barContent {
      height:  calc(100% - 58px);
      width: 100%;
      display: flex;
      border: 1px solid #ccc;
      justify-content: space-between;
    }
  }
</style>
